<template>
   <div class="search-form">
       <div class="area">
           <!-- 左侧搜索框 -->
            <div class="flex-left">
                <div class="area-left">
                    <i class="iconfont iconmagnifier"></i>
                    <!-- placeholder占位符 -->
                    <input type="text" placeholder="输入商家名、品类或商圈" v-model="info">
                </div>
            </div>
           <!-- 右侧按钮 -->
           <div class="area-right" @click="test">搜索</div>
       </div>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               info:''
           }
       }
   }
</script>
   
<style scoped lang="less">
   .search-form{
       padding: .266667rem;
       .area{
           width: 100%;
           height: 1.066667rem;
           display: flex;/** 父级元素添加弹性布局*/
           .flex-left{
               flex: 1;
           }
           .area-left{
               height:1.066667rem;
               background: white;
               line-height: 1.066667rem;
               display: flex;
               i{
                   font-size: .533333rem;
                   margin-left: .133333rem;
                   vertical-align: bottom;
               }
               input{
                   border:none;
                   outline: none;/**外轮廓线 */
                   flex: 1;
                   padding-right: .133333rem;
               }
           }
           .area-right{
               height: 1.066667rem;
               width: 1.6rem;
               color: #999;
               background: #dcdcdc;
               text-align: center;
               line-height: 1.066667rem;
               margin-left: .266667rem;
           }
       }
   }
</style>